<template>
	<view class="order-detail">
		<!-- 订单状态 -->
		<view class="state-area padding-lr margin-tb-sm">
			<view class="padding border-radius bg-base">
				<view>
					<view class="dflex-c fs-lg">
						<text class="iconfont iconyiwancheng- fs-lg fwb"></text>
						<text class="fwb margin-left-sm">订单已{{ order.tradeType==1?"摘单成功":"挂单成功"}}</text>
					</view>
					<view class="dflex-c">感谢您的支持，期待下次购买</view>
				</view>
			</view>
		</view>
		<!-- 订单商品明细 -->
		<view class="padding margin-lr margin-tb-sm bg-main border-radius" v-if="order.goods.id">
			<view class="goods-area margin-top" @click="togoods(item)">
				<view class="dflex pos-r">
					<view class="img">
						<image :src="order.goods.pic"></image>
					</view>
					<view class="margin-left-sm">
						<text class="clamp-2">{{order.goods.title }} {{ order.goods.intro }}</text>
						<view class="ft-dark fs-xs padding-left-xs padding-top-xs">
							{{ order.goods.units || '&nbsp;&nbsp;' }}
							<text class="margin-right">  × {{order.quantity}}</text>
						</view>
						<view class="margin-top-sm">
							<text class="price">{{ order.goods.sellPrice }}</text>
						</view>
					</view>
					<!-- <view v-if="item.is_vip === '是'" class="use-tag pos-a pos-top bg-base margin-right-sm">会员价</view> -->
				</view>
			</view>
		</view>

		<!-- 订单数据 -->
		<view class="order-area padding margin-lr margin-tb-sm bg-main border-radius">
			<view class="item">
				<text>订单编号：</text>
				<text class="">{{ order.tradeNo }}</text>
				<text class="copy" @click="copy(order.tradeNo)">复制</text>
			</view>
			<view class="item" v-if="order.expressNumber">
				<text>快递单号：</text>
				<text class="">{{ order.expressNumber }}</text>
				<text class="copy" @click="copy(order.expressNumber)">复制</text>
			</view>
			<view class="item">
				<text>下单时间：</text>
				<text class="">{{ order.createTime }}</text>
			</view>
		</view>
		<!-- 统计数据 -->
		<view class="total-area padding margin-lr margin-tb-sm bg-main border-radius" v-if="order.payment">
			<view class="ft-dark">
				<!-- <view class="item dflex-b">
					<text>运费</text>
					<text class="">￥{{Number(order.payment)+Number(order.tradeFee)}}</text>
				</view> -->
				<view class="item dflex-b">
					<text>价格：</text>
					<text class="">￥{{ order.payment}}</text>
				</view>
				<view class="item dflex-b">
					<text>手续费：</text>
					<text class="">￥{{order.tradeFee}}</text>
				</view>
			</view>
			<view class="item dflex-b">
				<text>实付款：</text>
				<text class="price">{{Number(order.payment)+Number(order.tradeFee)}}</text>
			</view>
		</view>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import {delivery_confirm} from "../../../js_sdk/apis/order.js"
	import {goods_detail} from "../../../js_sdk/apis/goods.js"
	export default {
		data() {
			return {
				// 商品数据
				order_detail: [],
				order:{},
				// 订单数据
				order_data: {},
				addressData: [],
				sharekefuList: [],
				shareEmptyList: [],
				order_id: '',
				goods_price_tip: '产品总计',
				time_remaining: 0,
			};
		},
		onLoad(options) {
			console.log(options)
			this.order={...options,goods:{}}
			this.loadData();
		},
		methods: {
			togoods(item) {
				// 跳转商品详情
				uni.navigateTo({
					url:"../../goods/goods?id="+this.order.goods.id
				})
			},
			tohome() {
				this.$api.tohome();
			},
			async loadData() {
				let _this = this;
				await goods_detail({
					znCommodityId: _this.order.commodityId
				}).then(res => {
					this.order.goods=res.data
					console.log(this.order)
				})
			},
			confirmOrder(item){
				let {commodityId,tradeNo,quantity} =this.order
				delivery_confirm({commodityId,deliveryApplyId:tradeNo,quantity}).then(res=>{
					this.$api.msg('已确认');
					this.loadData();
				})
			},
			// 查看物流
			toexpress(item) {
				uni.navigateTo({
					url: `/pages/user/order/order-express?deliveryApplyId=${this.order.tradeNo}`
				});
			},
			// 已发货
			toreceipt(item) {
				uni.showModal({
					title: '提示',
					content: '确认收货',
					success: (res)=> {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							let {commodityId,deliveryApplyId,quantity} =item
							delivery_confirm({commodityId,deliveryApplyId,quantity}).then(res=>{
								this.$api.msg('已确认');
								this.loadData();
								uni.hideLoading();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 删除订单
			delorder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '删除订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.$func.usemall.call('order/deleted', {
								order_id: _this.order_id,
							}).then(res => {
								if (res.code === 200) {
									uni.navigateBack({});
								}
							})
						} else if (res.cancel) {
							console.log('点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 取消订单
			cancelOrder() {
				let _this = this;

				uni.showModal({
					title: '提示',
					content: '取消订单',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '请稍后'
							});
							_this.$func.usemall.call('order/cancel', {
								order_id: _this.order_id,
								state: '已取消'
							}).then(res => {
								if (res.code === 200) {
									_this.loadData('refresh');
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			// 点击复制
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
			// 评价
			evaluate() {
				uni.navigateTo({
					url: `/pages/user/order/order-evaluate?id=${this.order_id}`
				});
			},
			// 申请退款
			refund() {
				uni.navigateTo({
					url: `/pages/user/order/order-refund?order_id=${this.order_id}`
				});
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.order-detail .item text:first-child {
		width: 152rpx;
		text-align: right;
		display: inline-block;
	}

	/* 状态区 */
	.state-area {}

	/* 收货人 */
	.address-area {}

	/* 商品区 */
	.goods-area {
		&:last-child {
			margin-bottom: 0;
		}

		image {
			width: 180rpx;
			height: 180rpx;
		}
	}

	/* 订单数据区 */
	.order-area {
		.item {
			line-height: 66rpx;

			.copy {
				margin-left: 20rpx;
				padding: 10rpx 40rpx;
				background-color: #f1f1f1;
				border-radius: 40rpx;
				font-size: 24rpx;
			}
		}
	}

	/* 数据统计区 */
	.total-area {
		.item {
			line-height: 48rpx;

			text {
				padding-right: 16rpx;
			}
		}
	}

	/* 操作区 */
	.oper-area {
		width: 100%;
		height: 100rpx;
		height: calc(env(safe-area-inset-bottom) + 100upx);
		background-color: #fff;
		position: fixed;
		z-index: 1;
		bottom: 0;
		left: 0;
		border-top: 1px solid #f0f0f0;

		.btn-area {
			font-size: $font-sm;
			color: $font-color-base;
			width: 96rpx;

			.iconfont {
				font-size: 40rpx;
				line-height: 48rpx;
			}
		}

		/* 操作按钮 */
		.action-btn {
			width: 156rpx;
			height: inherit;
			line-height: inherit;
			margin: 0;
			margin-left: 20rpx;
			padding: 12rpx 0;
			font-size: $font-sm + 2upx;
			color: $font-color-dark;
			background: #fff;
			border-radius: 100px;
			/* #ifdef MP-QQ || MP-ALIPAY */
			border: 1px solid;
			/* #endif */

			&:after {
				border-radius: 100px;
			}

			&.main-btn {
				background: #fff9f9;
				color: $base-color;

				&:after {
					border-color: #f7bcc8;
				}
			}
		}
	}
</style>
